<template>
  <view class="address-selector" v-if="show">
    <view class="mask" @click="handleClose"></view>
    <view class="content">
      <view class="header">
        <text class="title">选择收货地址</text>
        <text class="close" @click="handleClose">×</text>
      </view>
      <view class="address-list">
        <view 
          class="address-item" 
          v-for="address in addressList" 
          :key="address.address_id"
          @click="handleSelect(address)"
        >
          <view class="address-info">
            <view class="contact-info">
              <text class="name">{{ address.contacts }}</text>
              <text class="phone">{{ address.contactsPhone }}</text>
              <text class="default-tag" v-if="address.isDefault">默认</text>
            </view>
            <view class="address-detail">
              <text>{{ address.province }}{{ address.city }}{{ address.district }}{{ address.street }}{{ address.detail }}</text>
            </view>
            <view class="address-type">
              <text>{{ addressTypeShow(address.addressType) }}</text>
            </view>
          </view>
          <view class="select-icon" v-if="selectedAddress?.addressId === address.addressId">✓</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import { useOrderStore } from '../store/order'
import { addressApi } from '../api'
import { addressTypeShow } from '../utils/address'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})


const emit = defineEmits(['update:show', 'select'])

const orderStore = useOrderStore()

// 测试数据
const addressList = ref([])

const selectedAddress = ref(null)

// TODO: 获取地址列表接口
// 接口路径: /api/address/list
// 请求方式: GET
// 参数: u_id (用户ID)
// 返回: 地址列表数组
const getAddressList = async () => {
  const token = uni.getStorageSync('token')
  const res = await addressApi.getAddressList(token)
  addressList.value = res.data
}

// 初始化时选择默认地址
const initDefaultAddress = async () => {
  await getAddressList()
  const defaultAddress = addressList.value.find(addr => addr.isDefault)
  console.log("defaultAddress:", defaultAddress)
  if (defaultAddress) {
    selectedAddress.value = defaultAddress
    orderStore.setSelectedAddress(defaultAddress)
  }
}

// 选择地址
const handleSelect = (address) => {
  selectedAddress.value = address
  console.log("address:", address)
  orderStore.setSelectedAddress(address)
  emit('select', address)
  handleClose()
}

// 关闭弹窗
const handleClose = () => {
  emit('update:show', false)
}

// 组件挂载时获取地址列表
onMounted(() => {
  initDefaultAddress()
})
</script>

<style lang="scss" scoped>
.address-selector {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    height: 70vh;
    display: flex;
    flex-direction: column;
    
    .header {
      padding: 20px;
      text-align: center;
      position: relative;
      border-bottom: 1px solid #eee;
      flex-shrink: 0;
      
      .title {
        font-size: 18px;
        font-weight: 600;
      }
      
      .close {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 24px;
        color: #999;
      }
    }
    
    .address-list {
      flex: 1;
      overflow-y: auto;
      padding: 0 20px;
      -webkit-overflow-scrolling: touch;
      
      &::-webkit-scrollbar {
        width: 4px;
        background-color: transparent;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 2px;
      }
      
      .address-item {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &:last-child {
          border-bottom: none;
        }
        
        .address-info {
          flex: 1;
          
          .contact-info {
            margin-bottom: 8px;
            
            .name {
              font-size: 16px;
              font-weight: 600;
              margin-right: 10px;
            }
            
            .phone {
              color: #666;
            }
            
            .default-tag {
              background: #008CB5;
              color: #fff;
              font-size: 12px;
              padding: 2px 6px;
              border-radius: 4px;
              margin-left: 10px;
            }
          }
          
          .address-detail {
            color: #333;
            font-size: 14px;
            margin-bottom: 8px;
          }
          
          .address-type {
            color: #999;
            font-size: 12px;
          }
        }
        
        .select-icon {
          color: #008CB5;
          font-size: 20px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style> 